import React, { useState, useEffect } from 'react'
import { Row, Col, Form, Input, Typography,  Button, DatePicker, Table, Radio, Divider } from "antd"
import { ColumnsType } from 'antd/lib/table';
import produce from '../../mobx/store/produce';
import { observer } from 'mobx-react';

const { RangePicker } = DatePicker;
const { Title } = Typography
function ActivityAdd() {

    const [form] = Form.useForm()
    const { producelist, cproducelist }: any = produce




    useEffect(() => {
        cproducelist({})
    }, [])

    const onFinish = () => {

    }

    const onFinishFailed = () => {

    }

    const add = ()=>{
        
    }



    const columns = [
        {
            title: '商品名称',
            dataIndex: 'pname',
            render: (text: string) => <a>{text}</a>,
        },
        {
            title: '商品原价',
            dataIndex: 'price',
            width: 150,
        },
        {
            title: '活动价格',
            dataIndex: 'discount',
            render: (text: string) => <b>{text}</b>,
        },

    ];

    interface DataType {
        key: React.Key;
        name: string;
        price: number;
        discount: number
    }

    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },

    };


    return (
        <div style={{ width: "100%", height: "100%" }}>
            <Title level={3} style={{ margin: 30 }}> 活动添加 </Title>
            <Row style={{ display: "block", width: "700px" }}>
                <Col span={24}>
                    <Form
                        name="basic"
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                        wrapperCol={{ span: 24 }}
                    >
                        <Form.Item
                            label="活动名称"
                            name="event"
                            rules={[{ required: true, message: '请输入活动名称' }]}
                            wrapperCol={{ offset: 0, span: 12 }}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="ValidTime"
                            label="有效时间"
                            rules={[{ type: 'array' as const, required: true, message: '请选择时间' }]}
                        >
                            <RangePicker showTime format="YYYY-MM-DD HH:mm" />
                        </Form.Item>

                        <Form.Item
                            name="ChooseGoods"
                            label="选择商品"
                            rules={[{ required: true }]}
                        >
                            <Table
                                dataSource={producelist}
                                sticky
                                columns={columns}
                                id="table"
                                rowSelection={rowSelection}
                                pagination={{ pageSize: 5 }}
                            />
                        </Form.Item>

                        <Form.Item
                            style={{ float: "right" }}
                        >
                            <Button onClick={add}>添加活动</Button>
                        </Form.Item>
                        
                    </Form>
                </Col>
            </Row>
        </div >
    )
}

export default observer(ActivityAdd)